<template>
  <el-dialog v-model="dialogVisible" title="明细" width="640" :before-close="handleClose" append-to-body destroy-on-close>
    <el-descriptions title="" border :column="2">
      <el-descriptions-item label="角色名称"  :min-width="100">{{data?.label}}</el-descriptions-item>
      <el-descriptions-item label="角色值">{{data?.value}}</el-descriptions-item>
      <el-descriptions-item label="关联用户" :span="2">
        <el-space wrap>
          <div v-for="(item, index) in data?.users" :key="index">
            <el-tag type="info">{{ item.name }}: {{ item.mobile }}</el-tag>
          </div>
        </el-space>
        <!-- {{ data?.users?.map((item) => item?.name)?.join(', ') }} -->
      </el-descriptions-item>
      <el-descriptions-item label="授权菜单" :span="2">
        <!-- {{ data?.menus?.map((item) => item?.name)?.join(', ') }} -->
        <el-tree :data="listToTree({ list: data?.menus })" />
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">{{data?.createdAt}}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{data?.updatedAt}}</el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="js" setup>
import { ref } from 'vue'
import { listToTree } from "@/utils"

const dialogVisible = ref(false)

const handleClose = (done) => {
  done()
  dialogVisible.value = false;
}

const data = ref();

const open = ({ row } = {}) => {
  data.value = row
  dialogVisible.value = true;
}

defineExpose({
  open
})
</script>